<script setup>
  /**
   * 
   * 1. 体验了vue-router基本使用流程
   * 2. 体验了指定router-view标签显示
   */
</script>

<template>
  <div>

    <!-- 切换触发的按钮 -->
    <router-link to="/list">切换list</router-link> <br>
    <router-link to="/add">切换add</router-link>

    <!-- 展示组件
        router-view: 展示组件的区域
           router-view没有标识,默认视图 [路由规则中,只要没有指定在哪个router-view显示,就在此处显示]
           router-view name="listView" 给显示的标签起名称, router.js规则中指定 地址 = 组件 = router-view
    -->
           <br>
      默认组件
    <router-view></router-view>
    <hr>  
    list组件
    <router-view name="listView"></router-view>
    <hr>  
    add组件
    <router-view name="addView"></router-view>

  </div>
</template>

<style scoped>

</style>